﻿@page "/heatmap-chart/cell"

@using Syncfusion.Blazor.HeatMap
@using sf_blazor_heatmapdata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the percentage growth rate of individuals using the internet in a country compared to the overall population of the country.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to bind two-dimensional array object as DataSource for Heatmap and configure the Heatmap using the data adaptor support.</p>
   <p>Tooltip is enabled in this example. To see the Tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
</ActionDescription>

<div class="control-section">
    <div class="row">
        <div class="col-md-12">
            <SfHeatMap DataSource="@DataSource">
                <HeatMapEvents TooltipRendering="@OnRendering"></HeatMapEvents>
                <HeatMapTitleSettings Text="Percentage of Individuals Using Internet by Country">
                    <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Normal"></HeatMapTitleTextStyle>
                </HeatMapTitleSettings>
                <HeatMapDataSourceSettings IsJsonData="false" AdaptorType="AdaptorType.Cell"></HeatMapDataSourceSettings>
                <HeatMapXAxis Labels="@XLabels" LabelRotation="45" LabelIntersectAction="LabelIntersectAction.None"></HeatMapXAxis>
                <HeatMapYAxis Labels="@YLabels"></HeatMapYAxis>
                <HeatMapPaletteSettings>
                    <HeatMapPalettes>
                        <HeatMapPalette Color="#3498DB"></HeatMapPalette>
                        <HeatMapPalette Color="#2C3E50"></HeatMapPalette>
                    </HeatMapPalettes>
                </HeatMapPaletteSettings>
                <HeatMapCellSettings Format="{value} %">
                    <HeatMapCellTextStyle Size="15px" FontWeight="500" FontStyle="Normal"></HeatMapCellTextStyle>
                    <HeatMapCellBorder Color="White"></HeatMapCellBorder>
                </HeatMapCellSettings>
                <HeatMapLegendSettings Visible="false"></HeatMapLegendSettings>
            </SfHeatMap>
        </div>
    </div>
</div>

@code
{
    string[] XLabels = new string[] { "China", "Australia", "Mexico", "Canada", "Brazil", "USA", "UK", "Germany", "Russia", "France", "Japan" };
    string[] YLabels = new string[] { "2000", "2005", "2010", "2011", "2012", "2013", "2014"};
    FontModel CellTextStyle = new FontModel() { Size = "15px", FontWeight = "500", FontStyle = "Normal" };
    BorderModel CellBorder = new BorderModel() { Color = "White" };
    double[,] DataSource = HeatMapData.CellData();
    public void OnRendering(TooltipEventArgs args)
    {
        args.Content = new string[] {args.YLabel + " | " + args.XLabel + " : " + args.Value + " % "};
    }
}